<template>
  <div class="content">
    <h2>{{ type }}分类</h2>
    <!-- 
      插槽:
        什么时候使用插槽
          在封装组件的时候,有一块内容结构需要在使用组件的时候传递进来,而不是预先定义好的
          此时可以在未来结构插入的地方书写一个slot标签占位
     -->
    <!-- 匿名插槽其实也有name属性,默认是default -->
    <slot name="default"></slot>
    <slot name="con"></slot>
    <slot name="footer"></slot>
    <footer>底部</footer>
  </div>
</template>


<script>
export default {
  name: "Content",
  props: ["type"],
};
</script>

<style scoped>
.content {
  background-color: cyan;
  overflow: hidden;
  width: 200px;
}
.content h2 {
  background-color: pink;
}
footer {
  background: greenyellow;
}
</style>
